<template>
	<view>
		<uni-nav-bar left-icon="left" statusBar backgroundColor="#F5F7F8" fixed @clickLeft="back" right-icon="more-filled" @clickRight="allread" title="消息中心" />
		
		<view class="message-list">
			<mescroll-body height="500px" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption">
				<view>
					<uni-swipe-action>
						<view class="" style="margin-bottom: 30rpx;"  v-for="(item,index) in data" :key="index">
							<uni-swipe-action-item  @click="silderClick($event,item,index)" :right-options="options" >
								<view class="item-message" @click.stop="toDetail(item,type)">
									<view class="message-type">
										<uni-badge class="message-title" :text="item.status == 1?1:0" :is-dot="true"
											absolute="rightTop" size="small">
											<view class="message-title">
												{{type ==0?item.title:'订单消息'}}
											</view>
										</uni-badge>
										<view class="message-info" v-if="type ==0">{{item.create_time}}</view>
										<view class="message-info" v-else>{{item.title}}</view>
										<!-- <roc-text class="message-info" :content="item.content"></roc-text> -->
									</view>
								</view>
							</uni-swipe-action-item>
						</view>
						
					</uni-swipe-action>

				</view>
			</mescroll-body>
		</view>
		<u-modal v-model="show" @confirm="confirm" show-cancel-button :content="content"></u-modal>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				// 滚动数据初始化
				visible_height: 60,
				solt_height: 0,
				page: 1,
				hasMore: true,
				data: [],
				data_number: 0,
				type: 0,
				downOption: {
					auto: false
				},
				show: false,
				options:[
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				  ],
				  content:'是否设置全部已读？',
				  tapindex:0
			}
		},
		onLoad(option) {
			this.type = option.type
			// this.loadData(0)
		},
		onShow() {
			// this.downCallback()
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			allread() {
				var that = this
				uni.showActionSheet({
					itemList: ['全部已读', '全部删除'],
					success: function (res) {
						that.tapindex =  res.tapIndex
						if(res.tapIndex == 0){
							that.content = '是否设置全部已读'
							that.show = true
						
						}else{
							that.content = '是否设置全部删除？'
							that.show = true
						}
					},
					fail: function (res) {
						// console.log(res.errMsg);
					}
				});
			},
			allReadMessage() {
				let opts = {
					url: this.type == 0 ? 'message/setAllSysReadStatus' : "message/setAllOrderReadStatus",
					method: 'get'
				};
				this.request.httpTokenRequest(opts, {}).then(res => {
					if (res.code == 0) {
						this.downCallback()
					}
				}, error => {

				})
			},
			allDelMessage(){
				let opts = {
					url: this.type == 0 ? 'message/delAllSysMsg' : "message/delAllOrderMsg",
					method: 'get'
				};
				this.request.httpTokenRequest(opts, {
					type:this.type == 0?'':1
				}).then(res => {
					if (res.code == 0) {
						this.downCallback()
					}
				}, error => {
				
				})
			},
			confirm() {
				if(this.tapindex == 0){
					this.allReadMessage()
				}else{
					this.allDelMessage()
				}
			},
			toDetail(item, type) {
				item.status = 0
				uni.navigateTo({
					url: '/otherpages/message/systemDetail?type=' + type,
					events: {
						detaildata: item
					},
					success(res) {

					}
				})
			},
			downCallback() {
				this.data = []
				this.mescroll && this.mescroll.resetUpScroll();
			},
			silderClick(e,item,index){
				this.delMessage(item,index)
			},
			delMessage(item,index){
				let url = {
					url: this.type == 0 ? "message/delSysMsg" : 'message/delOrderMsg',
					method: "get"
				}
				this.request.httpTokenRequest(url, {
					id: item.id
				}).then(res => {
					if (res.code == 0) {
						this.data.splice(index,1)
						this.$util.msg('删除成功')
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},
			upCallback(page) {
				let url = {
					url: this.type == 0 ? "message/getSysMessageList" : 'message/getOrderMessageList',
					method: "get"
				}
				this.request.httpTokenRequest(url, {
					page: page.num
				}).then(res => {
					if (res.code == 0) {
						this.data = [...this.data, ...res.data.data]
						this.mescroll.endSuccess(this.data.length,this.data.length == res.data.total?false:true);
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			}
		}
	}
</script>

<style lang="scss">
	.message-list {
		padding: 30rpx;
	}

	.item-message {
		height: 139rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		box-sizing: border-box;
		.message-icon {
			width: 57rpx;
			height: 60rpx;
		}

		.message-type {
			.message-title {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #08090A;
			}

			.message-info {
				font-size: 22rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #A3A3A3;
				margin-top: 10rpx;
				display: -webkit-box;
				  -webkit-box-orient: vertical;
				  -webkit-line-clamp: 2;
				  overflow: hidden;
				  text-overflow: ellipsis;
			}
		}
	}
</style>